<template>
  <div class="card-out-container">
    <a-spin :spinning="spinning">
      <a-form layout="inline" v-if="showMore" class="multi-line-search-form" id="outputSumSearchBoxId">
        <template v-for="(item , index) in outputSumSearchParams" :key="index">
          <a-form-item :label="item.title" v-if="item.show">
            <a-input v-if="item.type=='input'" :maxLength="item.maxLength" v-model:value.trim="queryParam[item.key]" :placeholder="`${$t('common.pleaseInput')}${item.title}`" @keyup.enter="loadData" allowClear />
            <a-range-picker v-if="item.type=='time'" v-model:value="queryParam[item.key]" :placeholder="[$t('common.startDate'), $t('common.endDate')]" format="YYYY-MM-DD" valueFormat="YYYY-MM-DD" />
          </a-form-item>
        </template>
        <a-form-item class="">
          <a-space>
            <a-button type="primary" @click="loadData">{{ $t('common.see') }}</a-button>
            <a-button @click="searchReset">{{ $t('common.reset') }}</a-button>
            <a-button type="link" @click="filterSearch">{{ $t('components.filterSet') }}</a-button>
          </a-space>
        </a-form-item>
      </a-form>
      <CustomTable rowKey="id" :loading="loading" bordered size="small" :dataSource="dataSource" :columns="columns" :scroll="{y: tableHeight }" :pagination="ipagination" @change="handleTableChange" :rowSelection="null" :showMore="showMore" :operateMargin="true" :drag="false" storeTableName="outputSumTable" tableColumnsSort="outputSumTableSort">
        <template #operateLeft>
          <div class="operate-left">
            <a-button type="primary" @click="exportTable">{{ $t('common.outputExcel') }}</a-button>
            <!--<a-button type="primary" ghost @click="printTable">打印</a-button>-->
          </div>
        </template>
        <template #operateRight>
          <div class="slot-operate-right">
            <a-input-search v-model:value="fuzzySearch" :placeholder="$t('hangManage.makeNo')" enter-button v-if="!showMore" @search="loadData" />
            <a-button class="ml-10" @click="toggleMore" type="primary" ghost>{{ $t('common.highFilter') }}</a-button>
          </div>
        </template>

        <template #bodyCell="{ scope }">
          <template v-if="scope.column.key === 'code'">
            <span class="code-link">{{ scope.record.code }} </span>
          </template>
        </template>
      </CustomTable>

      <div style="display:none;">
        <a-table id="printId" :loading="loading" bordered size="small" :dataSource="printDataList" :columns="printColumnsArr" :pagination="false">

        </a-table>
      </div>
    </a-spin>
    <FilterParamsModal ref="filterParamsModalRef" @ok="onParamsConfigOK" />
  </div>
</template>
<script>
import { ListMixinPm } from '@/mixin/listMixinPm.js'
import { columns, outputSumSearchParams } from './modules/config.js'
import { mapState } from "vuex"
import { store } from '@/store'
import { getLocalStorage } from "@/utils"
import printJS from "print-js"
import axios from "@/utils/request"
import CustomTable from '@/components/commonTable/customTable.vue'
import FilterParamsModal from '@/components/filterParamsModal/filterParamsModal.vue'
export default {
  name: 'outputSum',
  components: {
    CustomTable,
    FilterParamsModal
  },
  mixins: [ListMixinPm],
  computed: {
    ...mapState({
      waGroupList: state => state.normalData.waGroupList,
    })
  },
  data () {
    return {
      columns: columns,
      spinning: false,
      printDataList: [],
      url: {
        list: '/api/report/get-output-summary',
        exportUrl: '/api/report/export-output-summary',
      },
      columnsArr: [],
      columnsTitleArr: [],
      printColumnsArr: [],
      searchTimeAry: ['ProductTime'],
      outputSumSearchParams,
      fuzzySearchName: 'moNo'
    }
  },
  methods: {
    filterSearch () {
      this.$refs.filterParamsModalRef.open(this.outputSumSearchParams)
    },
    initTableHeight () {
      this.$nextTick(() => {
        if (this.showMore) {
          let formHeight = `${document.getElementById('outputSumSearchBoxId').clientHeight + 340}px`
          this.tableHeight = `calc(100vh - ${formHeight})`
        } else {
          this.tableHeight = 'calc(100vh - 320px)'
        }
      })
    },
    onParamsConfigOK (checkedAry) {
      this.outputSumSearchParams.forEach(i => {
        i.show = checkedAry.includes(i.key)
      })
      localStorage.setItem('outputSumSearchParams', JSON.stringify(this.outputSumSearchParams))
      this.initTableHeight()
    },
    async printTable () {
      await this.getColumnsList()
      this.queryParam.pageNo = 1
      this.queryParam.pageSize = 65335
      // console.log(this.queryParam)
      const res = await axios.postAction(this.url.list, this.queryParam);
      if (!res.data) return
      this.spinning = true;
      if (res) {
        this.printDataList = res.data.list;
        // console.log(this.printDataList)
        if (this.printDataList.length > 0) {
          setTimeout(() => {
            this.printTableData();
            this.spinning = false;
          }, 2000);
        } else {
          this.spinning = false;
        }
      }
    },
    //打印  请求做好的导出接口 变更数据展示
    printTableData () {
      printJS({
        printable: "printId", // 标签元素id
        type: "html",
        documentTitle: "["+this.$t('other.outputSummary')+"]",
        style: "#printId{width:100%;} "
          + " #printId .ant-table-thead>tr>th, #printId .ant-table-tbody>tr>td  {border: 1px solid #bcb8b8;border-collapse: collapse;} "
          + " #printId table{border-collapse: collapse;} "
      });
    },
    async exportTable () {
      await this.getColumnsList()
      let query = this.getQueryParams()
      let param = {
        ...query,
        No: 1,
        pageSize: 65335,
        columns: this.columnsArr,
        tables: this.columnsTitleArr
      }
      this.exportExcels(this.url.exportUrl, this.$t('other.outputSummaryTable'), true, param)
    },
    async getColumnsList () {
      let colArr = [];
      let paramsArr = [];
      let titleArr = [];
      let hangerTrackTable = getLocalStorage("outputSumTable") ? getLocalStorage("outputSumTable") : columns;

      if (hangerTrackTable && hangerTrackTable.length > 0) {
        hangerTrackTable.forEach(
          item => {
            if (item.visibility) {
              paramsArr.push(item.dataIndex)
              titleArr.push(item.title)
              colArr.push(item)
            }
          }
        )
      }
      this.columnsArr = paramsArr;
      this.columnsTitleArr = titleArr;
      this.printColumnsArr = colArr;
      // console.log(colArr,titleArr,paramsArr)
    },

  },
  async created () {
    this.outputSumSearchParams = getLocalStorage('outputSumSearchParams') || outputSumSearchParams
    await store.dispatch('getWaGroup')
  },
}
</script>
